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ç Обо мне 


• 10 лет коммерческого опыта, 
работал в Яндекс, Альфа-Банк 

° Спикер Google 1/0, Google Dev Fest 

° Автор статей на Хабре 

° Контрибьютор, ментор 


в t.me/NookieGrey 
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Содержание 


• Исходники изеМето 

• Бенчмарки 

• Когда использовать 

° Когда не использовать 

е Влияние на Реальные проекты 


• Принципы оптимизации 
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Исходники изеМето 


( : М 
= геѕо1меріѕраїсћһег( ); 
dispatcher. (create, deps); 


τι 
= ВеасіСиггепірізраіспег. 
(dispatcher === null) í 
еггог( 


dispatcher; 
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Исходники изеМето 


: ReactCurrentDispatcher, 
); 


exports. = ReactSharedInternals; 
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Исходники изеМето 


| 4 
(current !== null δᾶ current. !== null) 4 
ReactCurrentDispatcher. HooksDispatcherOnUpdateInDEV; 


4 
ReactCurrentDispatcher. HooksDispatcherOnMountInDEV; 
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Исходники изеМето 


HooksDispatcherOnUpdateInDEV = 
: ( 
( 
| , 
сиггепНоокМатеТпрем = 
ирде teon Ty PEDA 
τ ο ια s pa has 
ВеасёСуггепірізраіспег. ~ пи вета ЕЕ ασ... 
4 
ирдатеМето ( create, deps); 
4 


ВеасіСиггепірізраіспег. = ргемрт5ораТсћег; 
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Исходники изеМето 


HooksDispatcherOnUpdateInDEV = 
: ( 
( 
( 
сиггептНоокМатеТпОеу = 
Е ОУ: 
И 


ВеасёСуггепірізраіспег. ~ пи вета ЕЕ НЕКИМ Ца 
4 


ирдатеМето ( create, deps); 
7 í 
ReactCurrentDispatcher. = prevDispatcher; 
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Исходники изеМето 


( А ДЕ 

= прдатейогКктТпРгодгеззНоок(| ); 
= deps === undefined 2 null : deps; 

= ћоок. - 
(prevState !== null 66 пех ерз ! 
= ргеубтате|1!; 
( агенооКТпри? 5 Едцат ( пехірер5, ргемрер5)) í 
ргеубтате|0|; 


== лит) 


} 
} 
= nextCreate(); 
hook. = [nextValue, nextDeps]; 
nextValue; 
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Исходники изеМето 


( А ΤΙ 

= прдатейогКктТпРгодгеззНоок(| ); 
= дер$ === undefined ? null : дерз; 

= ћоок. я 
(prevState !== null && nextDeps ! 
= ргем5таје [1]: 
( агенооКкТпри? 5 Едцат (пех ер5, ргемрер5)) í 
ргеубтате|0|; 


ИХ: 


} 
} 
= пехіСгеаїе( ); 
Ποοκ. = [пех;Маше, пех+рерѕ]; 
пех{\а\ие; 
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Исходники изеМето 


( А ) 4 

= ирдафемогкКТпРгодге$$Ноок( ); 
= deps === undefined 2 пи : deps; 

= ћоок. - 
(prevState !== пи 66 пехірерэ ! 
= ргеубтате| 11; 
( агенооКкТпри? 5 Едцат ( пехірер5, ргемрер5)) í 
prevState[0]; 


к= ү 


} 
} 
= пехіСгеаїе( ); 
Ποοκ. = [пех;Маше, nextDeps]; 
пех{\а\ие; 
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Исходники изеМето 


: сиггепТНоок. 
: сиггепТНоок. 
: сиггепТНоок. 
: сиггеп{Ноок. 
ИН. 


( могКТпРгодгеззНооКк === null) í 
сиггепТ| уКепдегтпаЕтбег 1. = могКТпРгодгеззНооК = ΠΕΝΗΟΟΚ; 


1 


могКТпРгодгеззНооК = могКТпРгодгеззНоокК. = ΠΕΝΗΟΟΚ; 


могКТпРгодгеззНоок; 
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Исходники изеМето 


( А ДЕ 

= прдатейогКктТпРгодгеззНоок(| ); 
= deps === undefined 2 null : deps; 

= ћоок. - 
(prevState !== null 66 пех ерз ! 
= ргеубтате|1!; 
( агенооКТпри? 5 Едцат ( пехірер5, ргемрер5)) í 
ргеубтате|0|; 


== лит) 


} 
} 
= nextCreate(); 
hook. = [nextValue, nextDeps]; 
nextValue; 
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Издержки мемойзации 


тето изеМето изеСааск 


м М -- 


гие 
[гие 


μι Да) | | fi | rue 
ВА ОА УЗИ 


ἘΤΤΙ — time То interaction 


bus 
true 
true 
true 


е 
ыа 
true 


true 


Мемоизация увеличивает ТП! рендера на 10-15% 


Ахі5 


и 138 


141 
142 
143 
145 
149 
149 
150 
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Издержки мемоизации 


Е 
Ф 
Е 
Е 
143 


| i 


ΠΠ ЦЯ ή 
ШК МГ 


МІК ||| ИП 


||| 


| 


ἘΤΤΙ — time То interaction 


|| 
И 


| ή 
(ЦІ 


гие 


= СО = (М Со 2 Ф O 


Ф! 0 1 Ф : Ф 1 O 
ó. ο Е 5 і Š 
= = = É 


Когда использовать Кеас-мемоизацию 
ο В зависимостях useEffect 


• Для супердорогих вычислений 
ο Для высоконагруженных компонентов 


Егоптепа 
Conf 2022 


Использование в зависимостях изеЕНес|) 


import {createContext, useCallback, изеЕ? Тест from "react"; 


const Context = createContext({}); 


export function NotifyContext({children}) { 
const notify = useCallback(() => í 


lo ШЕ 
return ( 
<Соптехт. Ргоутдег маше=( (по Ту))> 
{children} 
</Context.Provider> 


) 


Frontend 
FC Conf 


Использование в зависимостях изеЕНес|) 


import {createContext, изеСса раск, изеЕ? Тест from "react"; 


const Context = сгеаёеСопёех((4 У); import ФивеСоп ех! from "react"; 
export function Мо 1ТуСоптех (4 сп 1агеп)) í export function Сотропеп*() í 
const notify = useCallback(() => 4 const {notify} = useContext(Context); 
И: useEffect(() => í 
return ( fetch() 
<Context.Provider value={{notify}}> «ћеп(() => 4 
{children} ; | 
</СопТтехт.Ргоутдег> }) 
) .саїсһ(еггог => í 
поТТТу( еггог. теззаде) 
+) 
y, [notify]) 
|, 
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Сложные вычисления 


( ) { 


= џзеМето(() => í 
calculate(count); 
ри [count] 
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Высоконагруженный компонент 


= пето(МегуЕхрепѕімеТгееСотропепї ); 


га 
| = изебтате( 0); 


= useCallback( ( ) => 4 
setState(event. А ) 


Γη) 


={state} 
={handler} 
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Зффект только при полной мемоизации 


Триплет 


— тето изеМето изеСа!Баск Axis 
| | | | | | | | й ἽΝ --- - іе се 
„АДАМ А МДА ΛΙ πα м . 
ду инициали ШАЎ ЛО а в ме іме #60 
НИ στ. < зв 
|| ШАН МИ Ци а а че пе S ag 
| | тие true {гие 0 


5 Frontend 
*Триплет - полный набор из З элементов Conf 2022 


Когда НЕ 
использовать 
Кеас-мемоизацию 


• Для предотвращения 
избыточного рендера 


• Полное покрытие 
проекта мемоизацией 


= Твит 


дэн 
i @dan_abramov 


Why doesn’t React put тето() around every 
component by default? |5п 1 it faster? Should we make 
a benchmark to check? 


Ask yourself: 
Why don’t you put Lodash memoize() around every 


function? Мошап t that make all functions faster? Do 
we need a benchmark for this? Why not? 


5:22 AM : 12 янв. 2019 r. - Twitter Web App 


44 petenta > 8 твитов с цитатами 321 отметка «Нравится» 


Q t; 2 


Е. 


Frontend 
Conf 2022 


Избыточный рендер 


Ори 
[ А | = useState(0); 
= ( ) => 4 


зет тате ( еуепт. š ) 


={state} ={handler} 
} 
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Time (ms) 


Реальный проект 


Полностью покрытый мемоизацией 


Мате Ахі5 
м и тетоіғеа 41 
without 1 
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Реальный проект 


Переопределяем тето 


Мате Ахі5 
memoized 01 
и м without м 1 


React. = (Component) => { 


return Component; 


} 
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Реал ЬНЫ Й П рое КТ Переопределяем тето 


м м Мате v Axis 
я м memoized 1 
м м without “1 


React. = (Component) => { 


ІІ τ 
M | | нА | | | || | т | 
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Реальный проект? 22  ] запускаембезтето 


|| | | | | II! asa 


| | І | | [1 е 


| | | | | | | . l || 
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Чек-лист 


» Принцип Целесообразности 
» Преждевременная оптимизация 
) Необоснованное усложнение кода 


у Оптимизация узких мест 


) Оптимизация ради оптимизации 


Прежде чем начать оптимизировать 
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Принцип Целесообразности 


Есть ли потребность в оптимизации? 
» Преждевременная оптимизация 

) Необоснованное усложнение кода 

у Оптимизация узких мест 


) Оптимизация ради оптимизации 


Цель -> Средство -> Результат?! 
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Преждевременная оптимизация 


) Принцип Целесообразности Бэклог 


Безопасность 


| Приоритетна ли оптимизация? Архитектура Багфикс Оптимизация 


у Необоснованное усложнение кода 
у Оптимизация узких мест 


) Оптимизация ради оптимизации 


безграничные потребности М5 ограниченные ресурсы 
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Необоснованное усложнение кода 


) Принцип Целесообразности 


) We should forget about small 
Преждевременная оптимизация | efficiencies, say about 97% о {Пе 
time: premature optimization is the 


Оправдана ли оптимизация? root of all evil. 


— Donald ўш, — 


у Оптимизация узких мест 
AZ ОбОТЕ5 


) Оптимизация ради оптимизации 


Управление сложностью 
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Оптимизация узких мест 


» Принцип Целесообразности 
) Преждевременная оптимизация 
) Необоснованное усложнение кода 


| Верные ли участки кода мы оптимизируем? 


) Оптимизация ради оптимизации 


Бутылочное горлышко 
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Оптимизация ради оптимизации 


» Принцип Целесообразности 

» Преждевременная оптимизация 

у Необоснованное усложнение кода 
у Оптимизация узких мест 


| Не обманываем ли мы себя? 


More computing sins аге committed 
in the name of efficiency (without 
necessarily achieving it) than for any 
other single reason - including blind 


stupidity. 
дот. (бат. (ως = 


AZQUOTES 


Необдуманная оптимизация приносит вред 
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Мемоизация 


• Недешевая 

е Работает только в триплете 

° Используется в 99% в изеЕ ес! 

е Есть ли потребность? 

• Есть ли ресурсы? 

ο Больше выгоды, чем вреда? 

е Заточена под бутылочное горлышко? 


• Приносит ли профит? 
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Секция вопросов 


Не используйте 
повсеместную мемоизацию 
только для предотвращения 
избыточного рендера 


Гагулия Нугзар 6 
@NookieGrey 


+ 
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